<template>
    <div class="result">
        <ul>
            <li v-for="(song,index) in result" :key="index">
                <SongItem :item="song" @play="$emit('play',$event)">{{index+1}}</SongItem>
            </li>
        </ul>
        <Loading v-if="showLoading" ></Loading>
        <p class="loadmore" @click="loadMore">加载更多</p>
    </div>
</template>
<script>
    import SongItem from "../components/SongItem";
    import Loading from "../components/Loading";
    export default {
        name: "SearchResult",
        props:['keywords'],
        data(){
            return {
                result:[],
                page: 1,
                showLoading:true
            }
        },
        created(){
            this.result=[];
            this.loadSearch();
        },
        components:{
            SongItem,
            Loading
        },
        methods:{
            loadSearch(){
                //根据关键字获取搜索结果
                let offset=(this.page-1)*30;
                this.$http.get("/search?keywords="+this.keywords+"&type=1&offset="+offset)
                    .then(data=>{
                        this.result=this.result.concat(data.data.result.songs);
                        this.showLoading=false;

                    })
            },
            loadMore(){
                this.page++;
                this.showLoading = true;
                this.loadSearch();
            }
        }
    }

</script>
<style lang="less" scoped>
    p{
        background-color: bisque;
        text-align: center;
    }

</style>